<template>
    <div class="container">
      <h1>分组管理</h1>
      <el-table :data="groups" style="width: 100%">
        <el-table-column prop="name" label="小组名"></el-table-column>
        <el-table-column prop="leader" label="组长"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="editGroup(scope.row)" type="primary" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-dialog v-model="dialogVisible" title="编辑小组">
        <div class="dialog-content">
          <el-transfer
            v-model="selectedStudents"
            :data="students"
            filterable
            filter-placeholder="请输入搜索内容"
            titles="['未分配学生', '小组学生']"
          ></el-transfer>
          <div class="input-group">
            <label for="editGroupName">小组名</label>
            <el-input v-model="editGroupName" id="editGroupName" required></el-input>
          </div>
          <div class="input-group">
            <label for="editGroupLeader">组长</label>
            <el-select v-model="editGroupLeader" id="editGroupLeader" placeholder="请选择组长">
              <el-option
                v-for="student in selectedStudents"
                :key="student.key"
                :label="student.label"
                :value="student.label"
              ></el-option>
            </el-select>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveGroup">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElMessageBox } from 'element-plus';
  import 'element-plus/dist/index.css';
  
  const groups = ref([
    { id: 1, name: '组A', leader: '学生1', students: [{ key: 1, label: '学生1' }] },
    { id: 2, name: '组B', leader: '学生2', students: [{ key: 2, label: '学生2' }] }
    // 添加更多小组信息
  ]);
  
  const students = ref([
    { key: 1, label: '学生1' },
    { key: 2, label: '学生2' },
    { key: 3, label: '学生3' }
    // 添加更多学生
  ]);
  
  const dialogVisible = ref(false);
  const selectedStudents = ref([]);
  const editGroupName = ref('');
  const editGroupLeader = ref('');
  
  const editGroup = (group) => {
    editGroupName.value = group.name;
    editGroupLeader.value = group.leader;
    selectedStudents.value = group.students.map(student => student.key);
    dialogVisible.value = true;
  };
  
  const saveGroup = () => {
    const group = groups.value.find(g => g.name === editGroupName.value);
    if (group) {
      group.name = editGroupName.value;
      group.leader = editGroupLeader.value;
      group.students = students.value.filter(student => selectedStudents.value.includes(student.key));
    }
    dialogVisible.value = false;
    ElMessageBox.alert('小组信息已更新', '提示');
  };
  </script>
  
  <style scoped>
  .container {
    padding: 20px;
  }
  
  h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
  }
  
  .el-table {
    margin-bottom: 20px;
  }
  
  .dialog-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .input-group {
    display: flex;
    flex-direction: column;
  }
  
  .input-group label {
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  .dialog-footer {
    text-align: right;
  }
  </style>
  